<template>
  <div class="dataBase">
    <div>
      <ContentWrap>
        <AsyncTable v-bind="tableInfo" ref="tableRef" />
      </ContentWrap>
    </div>
    <div>
      <el-button @click="closeOutDrawer">取消</el-button>
    </div>
  </div>
</template>

<script setup lang="tsx">
import AsyncTable from '@/components/AsyncTable'
import {
  renderFinger,
  classificationChangeRender,
  levelChangeRender,
  importanceChangeRender
} from '@/utils/commonRender'
import dayjs from 'dayjs'
const props = defineProps({
  params: {
    type: Object,
    default: () => {}
  },
  closeOutDrawer: Function
})
const tableRef = ref()

const tableInfo = reactive({
  columns: [
    { label: '文件名称', prop: 'fileName' },
    { label: '文件类型', prop: 'fileType' },
    { label: '文件大小', prop: 'fileSize' },
    { label: '文件路径', prop: 'relativePath' },
    { label: '文件指纹', render: renderFinger, width: '150px' },
    { label: '分级变更情况', prop: 'levelChange' },
    { label: '分类变更情况', prop: 'ClassificationChange' },
    { label: '重要程度变更情况', prop: 'ImportanceChange' },
    { width: '80px' }
  ],
  data: []
})

const getLevelClass = () => {
  // first
  const firstItem = props.params.firstItem
  const firstClassification = firstItem.handClassificationName
    ? `${firstItem.handClassificationName}（人工）`
    : firstItem.classificationName
      ? `${firstItem.classificationName}（自动）`
      : '--'

  let firstLevel
  if (
    firstItem.auditStatus == '2' &&
    dayjs(firstItem.deadlineTime).isBefore(dayjs()) &&
    firstItem.deadlineTime
  ) {
    firstLevel = `${firstItem.deadlineLevelName}（人工）`
  } else {
    if (firstItem.handLevelName) {
      firstLevel = `${firstItem.handLevelName}（人工）`
    } else if (firstItem.levelName) {
      firstLevel = `${firstItem.levelName}（自动）`
    } else {
      firstLevel = '--'
    }
  }
  const firstImportance = firstItem.handImportance || firstItem.importance || '--'

  // next
  const nextItem = props.params.nextItem
  const nextClassification = nextItem.handClassificationName
    ? `${nextItem.handClassificationName}（人工）`
    : nextItem.classificationName
      ? `${nextItem.classificationName}（自动）`
      : '--'

  let nextLevel
  if (
    nextItem.auditStatus == '2' &&
    dayjs(nextItem.deadlineTime).isBefore(dayjs()) &&
    nextItem.deadlineTime
  ) {
    nextLevel = `${nextItem.deadlineLevelName}（人工）`
  } else {
    if (nextItem.handLevelName) {
      nextLevel = `${nextItem.handLevelName}（人工）`
    } else if (nextItem.levelName) {
      nextLevel = `${nextItem.levelName}（自动）`
    } else {
      nextLevel = '--'
    }
  }
  const nextImportance = nextItem.handImportance || nextItem.importance || '--'

  // result
  if (nextLevel == firstLevel) {
    tableInfo.data[0].levelChange = '无变更'
  } else {
    tableInfo.data[0].levelChange = `${firstLevel}->${nextLevel}`
  }
  if (nextClassification == firstClassification) {
    tableInfo.data[0].ClassificationChange = '无变更'
  } else {
    tableInfo.data[0].ClassificationChange = `${firstLevel}->${nextLevel}`
  }
  if (nextImportance == firstImportance) {
    tableInfo.data[0].ImportanceChange = '无变更'
  } else {
    tableInfo.data[0].ImportanceChange = `${firstImportance}->${nextImportance}`
  }
}

onMounted(() => {
  tableInfo.data.push(props.params.tableData)
  getLevelClass()
})
</script>

<style lang="scss">
.dataBase {
  .el-dropdown-link {
    cursor: pointer;
    color: var(--el-color-primary);
    display: inline-flex;
    align-items: center;
    line-height: 23px;
    padding-left: 12px;
  }
  .el-form .el-select {
    width: 100%;
  }
  :deep(.hide-expand .cell) {
    display: none;
  }
  :deep(.el-form .el-cascader) {
    width: 100%;
  }
  :deep(.operate-btn .el-button.is-text) {
    padding: 0 10px 0 0;
  }
  .el-dropdown-link:focus {
    outline: none;
  }
}
</style>
